<template>
  <el-card>
    <el-button @click="deleteDot()">重新绘制</el-button>
    <el-button @click="submitPolygonPath()">确定修改</el-button>
    <el-divider></el-divider>
    <!--        地图-->
    <baidu-map @rightclick="addDot" class="map" :center="center" :zoom="15" :scroll-wheel-zoom="true">
      <!--          缩放工具-->
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <!--          点-->
      <bm-marker :position="dot">
        <bm-label content="机构位置" :labelStyle="{color: 'red', fontSize : '10px'}" :offset="{width: -15, height: 30}"/>
      </bm-marker>
      <!--          范围-->
      <bm-polygon :path="polygonPath" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2" :editing="true" @lineupdate="updatePolygonPath"/>
    </baidu-map>
  </el-card>
</template>
<script>
  import Vue from 'vue'
  import BaiduMap from 'vue-baidu-map'
  import oau from '../../../../src/api/logisticsmanagement/branchManagement/operationalAreaUpdate'

  // 注册所有的百度地图组件
  Vue.use(BaiduMap, {
    ak: 'HQ7GzsIr9jkNWsFY6fMOsChIW3NSMnRk'
  })

  export default {
    props:['id'],
    data() {
      return {
        // 点，机构位置
        dot: {},
        // 地图初始显示点
        center: {lat: 116.404, lng: 39.915},
        //范围
        polygonPath: [],
      }
    },
    methods: {
      // 修改范围位置
      updatePolygonPath (e) {
        this.polygonPath = e.target.getPath()
      },
      // 查询详情
      getObj(){
        oau.getObj(this.$route.query.id).then(({data})=>{
          this.dot = JSON.parse(data.data.mutiPoints)
          this.center = JSON.parse(data.data.mutiPoints)
          if(data.data.userMutiPoints !== null){
            this.polygonPath = data.data.userMutiPoints
          }
        })
      },
      // 右键地图添加点
      addDot(type){
        this.polygonPath.push(type.Bg)
      },
      //修改或添加范围
      submitPolygonPath(){
        this.$store.commit("startAnimation",true);
        oau.updateCourierScop(this.$route.query.id,this.polygonPath).then(({data})=>{
          if(data.flag){
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success'
            });
          }else {
            this.$notify.error({
              title: '失败',
              message: '修改失败'
            });
          }
          this.$store.commit("startAnimation",false);
        })
      },
      //重新绘制
      deleteDot(){
        this.polygonPath = []
      },
    },
    created() {
      this.getObj()
    }
  }
</script>
<style>
  .map {
    width: 100%;
    height: 550px;
  }
</style>
